<!-- <p-button label="{{'Back'|translate}}" (onClick)="goback()" iconPos="left" icon="fa fa-arrow-left"></p-button> -->
<p-panel header="Project Basic">
  <div class="ui-g ui-fluid">
    <!-- basic info -->
    <div class="ui-g-8">
      <div class="ui-g-6">Listing Status</div>
      <div class="ui-g-6">
        <p-inputSwitch (onChange)="onStatusSwitchChange($event)" [(ngModel)]="propertyStatus"></p-inputSwitch>
        {{project.status}}
      </div>
      <!-- 新增字段featured -->
      <div class="ui-g-6">Featured Status</div>
      <div class="ui-g-6">
        <p-inputSwitch (onChange)="onFeaturedSwitchChange($event)" [(ngModel)]="propertyFeatured"></p-inputSwitch>
        {{project.isFeatured ? 'active' : 'inactive'}}
      </div>
      <div class="ui-g-6">Project Name</div>
      <div class="ui-g-6">
        <input type="text" pInputText [(ngModel)]="project.name" />
      </div>
      <div class="ui-g-6">Developer</div>
      <div class="ui-g-6">
        <input type="text" pInputText [(ngModel)]="project.developer" />
      </div>
      <div class="ui-g-6">Key Contact</div>
      <div class="ui-g-6">
        <input type="text" pInputText [(ngModel)]="project.keyContact" />
      </div>
      <div class="ui-g-6">Completion Date</div>
      <div class="ui-g-6">
        <p-calendar [(ngModel)]="project.settlementDate" [showIcon]="true"></p-calendar>
      </div>
      <div class="ui-g-6">
        Longitude(x)
        <a href="https://www.google.com.tw/maps/@-33.8544461,151.0557698,14.75z" target="_blank">
          <span class="text-black-50">
            <i class="fa fa-map-marker" aria-hidden="true"></i>
          </span>
        </a>
      </div>
      <div class="ui-g-6 ui-sm-12">
        <input type="text" pInputText [(ngModel)]="project.x" />
      </div>
      <div class="ui-g-6 ui-sm-12">
        Latitude(y)
      </div>
      <div class="ui-g-6 ui-sm-12">
        <input type="text" pInputText [(ngModel)]="project.y" />
      </div>
      <div class="ui-g-6 ui-sm-12">
        Price Range
      </div>
      <div class="ui-g-6 ui-sm-12">
        <input type="text" placeholder="$1000 ~ $2000" pInputText [(ngModel)]="project.priceRange" />
      </div>
      <div class="ui-g-6 ui-sm-12">
        Building Location
      </div>
      <div class="ui-g-6 ui-sm-12">
        <p-dropdown name="country" placeholder="Select a Country" [options]="cdropDownOptions.countryList" [(ngModel)]="cdropDownSelected.countrySelected"
          [autoWidth]="false"  filter="true" (onChange)="onRreshDropDownOptions($event)"></p-dropdown>
        <p-dropdown name="state" placeholder="Select a State" [options]="cdropDownOptions.stateList" [(ngModel)]="cdropDownSelected.stateSelected"
          [autoWidth]="false"  filter="true" (onChange)="onRreshDropDownOptions($event)"></p-dropdown>
        <p-dropdown name="city"  editable="true" placeholder="Select a City" [options]="cdropDownOptions.cityList" [(ngModel)]="cdropDownSelected.citySelected"
          [autoWidth]="false"  filter="true" (onChange)="onRreshDropDownOptions($event)"></p-dropdown>
      </div>
      <!-- <div class="ui-g-6 ui-sm-12">
        Suburb
      </div>
      <div class="ui-g-6 ui-sm-12">
        <input type="text" pInputText [(ngModel)]="project.suburb" />
      </div> -->
      <div class="ui-g-6 ui-sm-12">
        Address
      </div>
      <div class="ui-g-6 ui-sm-12">
        <input type="text" pInputText [(ngModel)]="project.buildingAddress" />
      </div>
      <div class="ui-g-6 ui-sm-12">
        Buyer Incentive
      </div>
      <div class="ui-g-6 ui-sm-12">
        <input type="text" pInputText [(ngModel)]="project.buyerIncentive" />
      </div>
      <div class="ui-g-6 ui-sm-12">
        Type
      </div>
      <div class="ui-g-6 ui-sm-12">
        <p-dropdown [options]="typeOptions" placeholder="Select" [(ngModel)]="project.type" [autoWidth]="false"></p-dropdown>
      </div>
      <div class="ui-g-6 ui-sm-12">
        Set Tag
      </div>
      <div class="ui-g-6 ui-sm-12">
        <p-multiSelect [options]="featureOptions"  placeholder="Select" [(ngModel)]="project.featureIds" [autoWidth]="false"></p-multiSelect>
      </div>
    </div>

    <!-- map -->
    <div class="ui-g-4 ui-sm-12">
      <div class="google-map ui-g" style="height: 400px;">
        <ng-container *ngIf="mapGoogleType; else elseMapTemplate">
          <agm-map [zoom]="12" [latitude]="project.y" [longitude]="project.x">
            <agm-marker [latitude]="project.y" [longitude]="project.x"></agm-marker>
          </agm-map>
          <a href="javascript:void(0)" (click)="mapGoogleType=false">Having trouble with opening Google map</a>
        </ng-container>
        <ng-template #elseMapTemplate>
          <abm-map #map [options]="options" (ready)="onBaiduMap($event)"></abm-map>
        </ng-template>
      </div>
    </div>
  </div>

  <hr>

  <div class="ui-g">
    <div class="ui-g-4">
      Building Logo
    </div>
    <div class="ui-g-8">
      <div *ngFor="let attachment of project['property-list-logo']">
        <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>

      </div>
      <p-fileUpload #fileUploaderProjectLogo (uploadHandler)="fileUpload('property-list-logo',fileUploaderProjectLogo,project, false)"
        customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
    </div>
    <div class="ui-g-4">
      Project Images
    </div>
    <div class="ui-g-8">
      <div *ngFor="let attachment of project['property-list-multi-pictures']">
        <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
      </div>
      <p-fileUpload #fileUploaderPictures (uploadHandler)="fileUpload('property-list-multi-pictures',fileUploaderPictures,project, false)"
        customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
    </div>
    <div class="ui-g-4">
      Project Attachments
    </div>
    <div class="ui-g-8">
      <div *ngFor="let attachment of project['property-list-attachments']">
        <p-button (onClick)="deleteFile(attachment)" icon="fa fa-trash" iconPos="left" styleClass="ui-button-danger"></p-button>
        <a [href]="attachment.filePath" target="_blank" download>{{attachment.originalFilename}}</a>
      </div>
      <p-fileUpload #fileUploaderBrochure (uploadHandler)="fileUpload('property-list-attachments',fileUploaderBrochure,project, false)"
        customUpload="true" [withCredentials]="true" multiple="multiple"></p-fileUpload>
    </div>
    <div class="ui-g-4">
      Building overview
    </div>
    <div class="ui-g-8">
      <p-editor [style]="{'height':'250px'}" [(ngModel)]="project.buildingOverview"></p-editor>
    </div>
    <div class="ui-g-4">
      Features
    </div>
    <div class="ui-g-8">
      <p-editor [style]="{'height':'250px'}" [(ngModel)]="project.features"></p-editor>
    </div>

  </div>

  <p-footer>
    <p-button label="SAVE" (onClick)="onUpdateProject()" icon="fa fa-floppy-o" iconPos="left" styleClass="ui-button-primary"></p-button>

  </p-footer>

</p-panel>


<p-growl [(value)]="msgs"></p-growl>